import 'styles/app.scss';
import 'styles/libs/_bootstrap.scss';
import 'react-toastify/dist/ReactToastify.css';

import { ThemeProvider } from '@mui/material';
import { initAxios } from 'libs/axios';
import Head from 'next/head';
import * as React from 'react';
import { useEffect, useState } from 'react';
import { ToastContainer } from 'react-toastify';
import { theme } from 'styles/theme/default-theme';

import ControlNavigation, { WaitLayout } from '../components/HOCs/control-navigation';
import DynamicDialog from '../components/shared/dialogs/dynamic-dialogs';
import { BRANDING } from '../constants/branding';
import InstallMetamask from '../containers/install-metamask';
import ServerDown from '../containers/server-down';

initAxios();

export function reportWebVitals() {
    // console.log('reportWebVitals', metric);
}

function App({ Component, props }) {
    const [isMetaMaskInstalled, setIsMetaMaskInstalled] = useState(false);
    const [isSeverDown, setIsSeverDown] = useState(false);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const isWindowLoadedInterval = setInterval(async () => {
            if (document.readyState === 'complete') {
                clearInterval(isWindowLoadedInterval);
                setIsMetaMaskInstalled(typeof window.ethereum !== 'undefined');
                // call API to check server down here
                setIsSeverDown(false);
                setLoading(false);
            }
        }, 100);
    }, []);

    return (
        <>
            <Head>
                <link rel="preconnect" href="https://fonts.googleapis.com" />
                <link rel="preconnect" href="https://fonts.gstatic.com" />
                <meta name="viewport" content="initial-scale=1, width=device-width" />
                <title>{BRANDING.NAME} by XLD</title>
            </Head>
            <ThemeProvider theme={theme}>
                {!loading ? (
                    <>
                        {isMetaMaskInstalled && !isSeverDown && (
                            <>
                                <ControlNavigation>
                                    <Component {...props} />
                                </ControlNavigation>
                                <ToastContainer
                                    position="top-center"
                                    autoClose={5000}
                                    hideProgressBar={false}
                                    newestOnTop={false}
                                    closeOnClick
                                    rtl={false}
                                    pauseOnFocusLoss
                                    draggable
                                    pauseOnHover
                                />
                                <DynamicDialog />
                            </>
                        )}
                        {!isMetaMaskInstalled && <InstallMetamask />}
                        {isMetaMaskInstalled && isSeverDown && <ServerDown />}
                    </>
                ) : (
                    <WaitLayout />
                )}
            </ThemeProvider>
        </>
    );
}

export default App;
